$.getJSON('../mock/presell.json', function(data) {
    // console.log(data);
    // console.log(data[0].presell[0]);
    // console.log($('.splist'));
    console.log(data[0].presell);
    // 预售-新品发布
    showPage(data[0].presell);
    showPage2(data[0].presell);
    showPage3(data[0].presell);
    showPage4(data[0].presell);
    qxdPage(data[0].presell);

    // 预售-抢先定
    $('.inline-block-list li a').click(function() {
        // console.log($(this).text());
        if ($(this).text() == '价格') {
            var qxdPagg = data[0].presell;
            qxdPagg.sort(function(a, b) {
                    return a.goods_price - b.goods_price;
                })
                // console.log(data[0].presell);
            qxdPagg.reverse();
            qxdPage(qxdPagg)
        }
    })
    $('.moren').click(function() {
        data[0].presell.sort(function(a, b) {
                return a.goods_id - b.goods_id;
            })
            // console.log(data[0].presell);
        qxdPage(data[0].presell);
    })
});
// function showPage(data) {
//     var pageDatas = ``;
//     for (var i = 0; i < data.length; i++) {
//         pageDatas += `
// <li>
//     <div class="p-warp">
//     <div class="p-img">
//         <a href="">
//             <img src="${data[i].nowurl}" alt="">
//         </a>
//     </div>
//     <div class="p-info">
//         <div class="p-name">
//             <a href="">${data[i].goods_title}</a>
//         </div>
//         <div class="p-item">
//             <div class="p-price">¥${data[i].goods_price}</div>
//             <span class="appointment">
//                 已有
//                 <em>${data[i].sales_volume}</em>
//                 人预约
//             </span>
//         </div>
//         <div class="p-dibu">
//             <a href="" class="btn">预售已结束</a>
//         </div>
//     </div>
// </div>
// </li>
// `;
//     }
//     $('.splist').eq(0).html(pageDatas);
// } 

// 预售-新品发布
// 渲染1
function showPage(data) {
    var pageDatas = `
<li>
    <div class="p-warp">
    <div class="p-img">
        <a href="">
            <img src="${data[0].nowurl}" alt="">
        </a>
    </div>
    <div class="p-info">
        <div class="p-name">
            <a href="">${data[0].goods_title}</a>
        </div>
        <div class="p-item">
            <div class="p-price">¥${data[0].goods_price}</div>
            <span class="appointment">
                已有
                <em>${data[0].sales_volume}</em>
                人预约
            </span>
        </div>
        <div class="p-dibu">
            <a href="" class="btn">预售已结束</a>
        </div>
    </div>
</div>
</li>
<li>
<div class="p-warp">
<div class="p-img">
    <a href="">
        <img src="${data[4].nowurl}" alt="">
    </a>
</div>
<div class="p-info">
    <div class="p-name">
        <a href="">${data[4].goods_title}</a>
    </div>
    <div class="p-item">
        <div class="p-price">¥${data[4].goods_price}</div>
        <span class="appointment">
            已有
            <em>${data[4].sales_volume}</em>
            人预约
        </span>
    </div>
    <div class="p-dibu">
        <a href="" class="btn">预售已结束</a>
    </div>
</div>
</div>
</li>          
                    `;
    $('.splist').eq(0).html(pageDatas);
};

// 渲染2
function showPage2(data) {
    var pageDatas = `
<li>
    <div class="p-warp">
    <div class="p-img">
        <a href="">
            <img src="${data[1].nowurl}" alt="">
        </a>
    </div>
    <div class="p-info">
        <div class="p-name">
            <a href="">${data[1].goods_title}</a>
        </div>
        <div class="p-item">
            <div class="p-price">¥${data[1].goods_price}</div>
            <span class="appointment">
                已有
                <em>${data[1].sales_volume}</em>
                人预约
            </span>
        </div>
        <div class="p-dibu">
            <a href="" class="btn">预售已结束</a>
        </div>
    </div>
</div>
</li>
`;
    $('.splist').eq(1).html(pageDatas);
};

// 渲染3
function showPage3(data) {
    var pageDatas = `
<li>
    <div class="p-warp">
    <div class="p-img">
        <a href="">
            <img src="${data[2].nowurl}" alt="">
        </a>
    </div>
    <div class="p-info">
        <div class="p-name">
            <a href="">${data[2].goods_title}</a>
        </div>
        <div class="p-item">
            <div class="p-price">¥${data[2].goods_price}</div>
            <span class="appointment">
                已有
                <em>${data[2].sales_volume}</em>
                人预约
            </span>
        </div>
        <div class="p-dibu">
            <a href="" class="btn">预售已结束</a>
        </div>
    </div>
</div>
</li>
`;
    $('.splist').eq(2).html(pageDatas);
};

// 渲染4
function showPage4(data) {
    var pageDatas = `
<li>
    <div class="p-warp">
    <div class="p-img">
        <a href="">
            <img src="${data[3].nowurl}" alt="">
        </a>
    </div>
    <div class="p-info">
        <div class="p-name">
            <a href="">${data[3].goods_title}</a>
        </div>
        <div class="p-item">
            <div class="p-price">¥${data[3].goods_price}</div>
            <span class="appointment">
                已有
                <em>${data[3].sales_volume}</em>
                人预约
            </span>
        </div>
        <div class="p-dibu">
            <a href="" class="btn">预售已结束</a>
        </div>
    </div>
</div>
</li>
`;
    $('.splist').eq(3).html(pageDatas);
};

// ********************************************
// 预售-抢先定 商品渲染
function qxdPage(data) {
    var qxdDatas = ``;
    for (var i = 0; i < data.length; i++) {
        qxdDatas += `
    <li>
                    <div class="s-warp">
                        <div class="p-img">
                            <a href="">
                                <img src="${data[i].nowurl}">
                            </a>
                        </div>
                        <div class="p-price">
                            <span><em>¥</em>${data[i].goods_price}</span>
                            <del><em>¥</em>59.00</del>
                        </div>
                        <div class="p-name">
                            <a href="https://x.dscmall.cn/presale.php?act=view&amp;id=60" title="" target="_blank">${data[i].goods_title}</a>
                        </div>
                        <div class="p-info">
                            <div class="p-left">
                                <div class="time" data-time="2021-12-21 17:35:15">
                                    已结束
                                </div>
                                <span class="appointment">已有<em>${data[i].sales_volume}</em>人预约</span>
                            </div>
                        </div>
                    </div>
                </li>`
    };
    $('.splist2').html(qxdDatas);
};


$('.inline-block-list a').click(function() {
    $(this).addClass('borderRed').parent().siblings().find('a').removeClass('borderRed');
    $(this).parents('.inline-block-list').prev().css('border', '1px solid #fff');
    $(this).parents('.inline-block-list').prev().children().css('color', '#3a78bf');
    // console.log($(this).hasClass('borderRed'));
    $('.filter-quanbu').click(function() {
        $(this).css('border', '1px solid #ec5051');
        $(this).children().css('color', '#f42424');
        $(this).next().find('a').removeClass('borderRed');
    });
});